<!DOCTYPE html>
<html lang="CN-ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="height=device-height, initial-scale=1.0">
    <title>宋 · 运</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var isMuted = false;
        function toggleMusic() {
        var audio = $('#audio')[0];
        var musicImg = $('#musicImg');

    if (isMuted) {
        audio.play();
        musicImg.attr('src', './image/music.png');
        isMuted = false;
    } else {
        audio.pause();
        musicImg.attr('src', './image/nomusic.png');
        isMuted = true;
    }
    }
        $(document).ready(function() {
        $(".musicbtn").click(function() {
        toggleMusic();
        });
    });
       

        function show(imagePath) {
            $('#tc').css('display', 'block');
                $('#tcimg').attr('src', imagePath);
                $('#tc').css('opacity', 1);
        }
        
        function hide() {
            $('#tc').css('opacity', 0);
                setTimeout(function() {
                    $('#tc').css('display', 'none');
                }, 1000);
            
        }
        function turn(a){
            var link = $('#link');
                if (a == 1) {
                    link.attr('href', 'longzhou.html');
                }
                if (a == 2) {
                    link.attr('href', 'yaling.html');
                }
                if (a == 3) {
                    link.attr('href', 'cuju.html');
                }
                if (a == 4) {
                    link.attr('href', 'cuiwan.html');
                }
            
        }//此处修改跳转页面链接
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
        
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
            margin: 0 auto;
            text-align: center;
            height: 100vh;
            overflow-y: hidden;
        }
        
        .bg {
            position: relative;
            margin: auto;
            overflow-y: hidden;
        }
        
        .bgimg {
            max-height: 100%;
            height: 100vh;
        }
        
        .tcbg {
            position: absolute;
            width: 80%;
            height: 45%;
            top: 25%;
            left: 13%;
            margin: 0 auto;
            display: none;
            animation: fadeIn 1s ease;
            opacity: 1;
            transition: opacity 1s ease;
        }
        @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
            }
        }
        
        .tcimg {
            max-width: 100%;
            max-height: 100%;
            top: 50%;
            left: 50%;
            
        }
        .musicbtn{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 2%;
            right: 2%;
            margin: 0 auto;
        }
        .musicimg{
            width: 100%;
            height: 100%;
            animation: rotate 5s linear infinite;

        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .btnhide {
            position: absolute;
            top: 0%;
            left: 84%;
            width: 10%;
            height: 10%;
            background-color: rgba(0, 0, 0, 0);
            border: 1px solid transparent;
        }
        
        .btnTurn {
            position: absolute;
            top: 79%;
            left: 35%;
            width: 30%;
            height: 8%;
            border-radius: 20px;
            background-color: rgb(191, 155, 93);
            color: #fff;
            font-size: 18px;
            align-items: center;
            justify-content: center;
            display: flex;
            font-family: 'Ma Shan Zheng', cursive;
        }
        
        .btn {
            position: absolute;
            width: 40px;
            height: 20%;
            /* background-color: rgb(191, 155, 93); */
            background: linear-gradient(60deg,rgb(191, 155, 93),rgb(238, 165, 48));
            border-radius: 50px;
            color: #fff;
            font-size: 3cqh;
            align-items: center;
            justify-content: center;
            display: flex;
            font-family: 'Ma Shan Zheng', cursive;
            border: 1px solid transparent;
            opacity: 0.9;
            container-type: inline-size;
        }
        
        .btn1 {
            top: 40%;
            left: 75%;
        }
        
        .btn2 {
            top: 25%;
            left: 233%;
        }
        
        .btn3 {
            top: 70%;
            left: 278%;
        }
        
        .btn4 {
            top: 35%;
            left: 420%;
        }
        
    
    </style>
</head>
<body>
    <div class="container">
        <audio id="audio" autoplay loop>
            <source src="./music/music.mp3" type="audio/mpeg">
        </audio>
        
        <div class="bg">
            
            <img class="bgimg" src="./image/langbig.jpg">
            <button class="btn btn1" onclick="show('./image/tc1.png');turn(1)">
                <a>赛<p>龙</p>舟</a>
            </button>
            <button class="btn btn2" onclick="show('./image/tc2.png');turn(2)">
                <a>掇<p>石</p>墩</a>
            </button>
            <button class="btn btn3" onclick="show('./image/tc3.png');turn(3)">
                <a>蹴<p>鞠</p></a>
            </button>
            <button class="btn btn4" onclick="show('./image/tc4.png');turn(4)">
                <a>捶<p>丸</p></a>
            </button>
        </div>
        <div class="musicbtn">
            <img id="musicImg" class="musicimg" src="./image/music.png">
        </div>
        
        <div class="tcbg" id="tc">
            <button class="btnhide" onclick="hide()"></button>
            <a id = 'link' href=""><button class="btnTurn">体验场景</button></a>
            <img class="tcimg" id="tcimg" src="">
        </div>
    </div>
</body>
</html>
